<template>
  <!-- 相关属性说明
    max-height: 设置表格的最大高度，超过此高度出现滚动条
    show-overflow-tooltip：单行内容过长默认会折行展示，通过show-overflow-tooltip = true控制行过长时显示省略号，并在鼠标悬停时显示完整内容
    fixed: 设置列固定在左侧或右侧
    type="selection": 表示该列为选择框列
  -->
  <div>
    <el-table
        ref="multipleTable"
        :data="tableData"
        style="width: 40%"
       
        max-height="400" 
        height="250">
        <el-table-column
        type="selection"
        width="55">
        </el-table-column>
        <el-table-column
        fixed
        prop="date"
        label="日期"
        width="150">
        </el-table-column>
        <el-table-column
        prop="name"
        label="姓名"
        width="120">
        </el-table-column>
        <el-table-column
        prop="province"
        label="省份"
        width="120">
        </el-table-column>
        <el-table-column
        prop="city"
        label="市区"
        width="120">
        </el-table-column>
        <el-table-column
        prop="address"
        label="地址"
        show-overflow-tooltip
        width="300">
        </el-table-column>
        <el-table-column
        prop="zip"
        label="邮编"
        width="120">
        </el-table-column>
         <el-table-column
      fixed="right"
      label="操作"
      width="100">
      <template slot-scope="scope">
        <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
        <el-button type="text" size="small">编辑</el-button>
      </template>
    </el-table-column>
    </el-table>
        <div style="margin-top: 20px">
            <el-button @click="toggleSelection([tableData[1], tableData[2]])">切换第二、第三行的选中状态</el-button>
            <el-button @click="toggleSelection()">取消选择</el-button>
        </div>
  </div>
 
  
</template>

<script>
export default {
    name: "TableColumn",
    components: {},
    data() {
        return {
        // 可以在这里定义一些数据
          tableData: [{
                date: '2016-05-03',
                name: '王小虎',
                province: '上海',
                city: '普陀区',
                address: '上海市普陀区金沙江路 1518 弄',
                zip: 200333
            }, {
                date: '2016-05-02',
                name: '王小虎',
                province: '上海',
                city: '普陀区',
                address: '上海市普陀区金沙江路 1518 弄',
                zip: 200333
            }, {
                date: '2016-05-04',
                name: '王小虎',
                province: '上海',
                city: '普陀区',
                address: '上海市普陀区金沙江路 1518 弄',
                zip: 200333
            }, {
                date: '2016-05-01',
                name: '王小虎',
                province: '上海',
                city: '普陀区',
                address: '上海市普陀区金沙江路 1518 弄，上海市普陀区金沙江路 1518 弄，上海市普陀区金沙江路 1518 弄，上海市普陀区金沙江路 1518 弄',
                zip: 200333
            }, {
                date: '2016-05-08',
                name: '王小虎',
                province: '上海',
                city: '普陀区',
                address: '上海市普陀区金沙江路 1518 弄',
                zip: 200333
            }, {
                date: '2016-05-06',
                name: '王小虎',
                province: '上海',
                city: '普陀区',
                address: '上海市普陀区金沙江路 1518 弄',
                zip: 200333
            }, {
                date: '2016-05-07',
                name: '王小虎',
                province: '上海',
                city: '普陀区',
                address: '上海市普陀区金沙江路 1518 弄',
                zip: 200333
        }],
        multipleSelection: []
        };
    },
    methods: {
        // 可以在这里定义一些方法
        toggleSelection(rows) {
            if (rows) {
            rows.forEach(row => {
                this.$refs.multipleTable.toggleRowSelection(row);
            });
            } else {
            this.$refs.multipleTable.clearSelection();
            }
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        handleClick(row) {
            console.log('Clicked row:', row);
            // 可以在这里处理点击事件
        }
    },
    mounted() {
        // 可以在这里执行一些初始化操作
    }
}
</script>

<style>

</style>